<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>TAB切换</title>
	<meta name="keywords" content="" />
	<meta name="Description" content="" />
	<style>
		*{margin:0;padding:0;}
		ul,ol {list-style-type:none;}
		#nav,#nav1,#nav2{width:800px;height:50px;border:1px solid #ccc;margin:0 auto;}
		#nav li,#nav1 li,#nav2 li {float:left;width:178px;height:50px;line-height:50px;border-left:1px solid #ccc;border-right:1px solid #ccc;text-align:center;}
		#con,#con1,#con2 {clear:both;width:800px;height:100px;border:1px solid #ccc;margin:0 auto;}
		#con li,#con1 li,#con2 li {width:800px;height:100px;display:none;text-align:center;font-size:30px;}
		#nav .hover,#nav1 .hover,#nav2 .hover {background:#ccc;}
		#con .show,#con1 .show,#con2 .show {display:block;}
		.tablf {width:100px;height:40px;border:1px solid red;float:left;}
		#nav #left,#nav #right{width:38px;}
		#nav1 li,#nav2 li {width:198px;}
		#con1 {position:relative;}
		#con1 #left1{display:block;width:80px;height:100px;position:absolute;top:0;left:0;border:1px solid #ccc;line-height:100px;}
		#con1 #right1 {display:block;width:80px;height:100px;position:absolute;top:0;right:0;border:1px solid #ccc;line-height:100px;}
		#left2,#right2{width:100px;margin:10px auto;border:1px solid red;}
		h1,h2,h3 {text-align:center;}
		p {width:800px;margin:5px auto;font-size:16px;}
		.greenlight {color:green;}
		.redlight {color:red;}

	</style>
	<script language="javascript">
	window.onload=function(){
	//通用
	function $(id){return typeof id=="string"?document.getElementById(id):id;}
	function $$(id,tagname){return typeof id=="string"?document.getElementById(id).getElementsByTagName(tagname):id.getElementsByTagName(tagname);}
	//tab切换开始
	//为每个按钮定义监听事件.触发事件后执行换className的函数。并且先判断左右按钮是否和tab标签、tab内容同级。
	/*function aaa(tabnav,tabcon,buLeft,buRight){
		for (i=0;i<$$(tabnav,"li").length ;i++ )
		{	
			var n = orNav(tabnav,i),c = orCon(tabcon,i);//读取是否同级的布尔值
			var listNav= new Array(0),listCon=new Array(0);
			if (n)continue;//左右按钮和tab标签同级跳出循环。
			if (c)continue;//左右按钮和tab内容同级跳出循环。
			//show(tabnav,tabcon,i);//绑定tab标签事件监听器。
			(function (tabnav,tabcon,i,e) {addEventHandler($$(tabnav,"li")[i],"mouseover",function(){return showp(tabnav,tabcon,e)})})(tabnav,tabcon,i,this);
			listNav.push(i);
			alert(listNav.length);
			addEventHandler($(buLeft),"click",tableft);
			addEventHandler($(buRight),"click",tabright);//绑定左右按钮事件监听器
		}
	}
	//绑定tab标签事件监听，onmouseover时更换classname
	function show(tabnav,tabcon,e){
		
	}
	function showp(tabnav,tabcon,e){
		
		for (i=0;i<$$(tabnav,"li").length ;i++ )
		{
			var tabnavn=$$(tabnav,"li")[i],tabconn=$$(tabcon,"li")[i];
			if (tabnavn==$("left")||tabnavn==$("right"))
			{
			continue
			};	
			tabnavn.className=tabnavn==e?"hover":"";
			tabconn.className=tabnavn==e?"show":"";
		}
	}
	//判断左右按钮是否和tab标签同级，同级则绑定对应事件并返回布尔值。
	function orNav(tabnav,e){
		if ($("left")==$$(tabnav,"li")[e])
		{
			addEventHandler($$(tabnav,"li")[e],"click",tableft);
			return true;
		}
		else if ($("right")==$$(tabnav,"li")[e])
		{
			addEventHandler($$(tabnav,"li")[e],"click",tabright);
			return true;
		}
	}
	//判断左右按钮是否和tab内容同级，同级则绑定对应事件并返回布尔值。
	function orCon(tabcon,e){
		if ($("left")==$$(tabcon,"li")[e])
		{
			addEventHandler($$(tabcon,"li")[e],"click",tableft);
			return true;
		}
		else if ($("right")==$$(tabcon,"li")[e])
		{
			addEventHandler($$(tabcon,"li")[e],"click",tabright);
			return true;
		}
	}
	//监听事件函数
	function addEventHandler(oTarget,sEventType,fnHandler){
		if(oTarget.addEventListener){
			oTarget.addEventListener(sEventType,fnHandler,false);
		}
		else{
			oTarget["on"+sEventType]=fnHandler;
		}
	}
	//调用tab切换
	aaa("nav","con","left","right");
	//点击left时确定当前聚焦下标，兑换成下标-1的对象的两个class，如果下标-1小于0则=3
	function tableft(){
		var nextnum=0;
		for (i=0;i<$$("nav","li").length ;i++ )
		{
			if ($$("nav","li")[i].className=="hover")
			{
				if (i-1<0)
				{
					nextnum=3;
				}
				else{nextnum=i-1;}
			}
		}//确定当前下标，并得到要切换的下标值nextnum完毕
		for (i=0;i<$$("nav","li").length ;i++ )
		{
			var tabnavn=$$("nav","li")[i],tabconn=$$("con","li")[i];
			tabnavn.className=i==nextnum?"hover":"";
			tabconn.className=i==nextnum?"show":"";
		}//切换class完毕

	}
	function tabright(){
		var nextnum=0;
		for (i=0;i<$$("nav","li").length ;i++ )
		{
			if ($$("nav","li")[i].className=="hover")
			{
				if (i+1>$$("nav","li").length-1)
				{
					nextnum=0;
				}
				else{nextnum=i+1;}
				break;
			}
		}
		for (i=0;i<$$("nav","li").length ;i++ )
		{
			var tabnavn=$$("nav","li")[i],tabconn=$$("con","li")[i];
			tabnavn.className=i==nextnum?"hover":"";
			tabconn.className=i==nextnum?"show":"";
		}

	}*/
	//获取nav和con的有效数组listNum;
	function fnList(id,tagname,orTongji){
		var listNum = [];
		for (i=0;i<$$(id,tagname).length ;i++ )
		{
			if (orTongji&&i==0){continue;}
			else if (orTongji&&i==$$(id,tagname).length-1){continue;}
			listNum.push(i);
		}
		return listNum;
	}
	//为nav增加事件监听器
	function addNavHandler(idNav,tagnameNav,orTongjiNav,cNameNav,idCon,tagnameCon,orTongjiCon,cNameCon,idLeft,idRight,listNav,listCon){
		for (i=0;i<listNav.length ;i++ )
		{
			addEventHandler($$(idNav,tagnameNav)[listNav[i]],"mouseover",function(){
				for (o=0;o<listNav.length ;o++ )
				{
					$$(idNav,tagnameNav)[listNav[o]].className=$$(idNav,tagnameNav)[listNav[o]]==this?cNameNav:"";
					$$(idCon,tagnameCon)[listCon[o]].className=$$(idNav,tagnameNav)[listNav[o]]==this?cNameCon:"";
				}
			});
		}
		if (idLeft||idRight) orLR(idNav,tagnameNav,orTongjiNav,cNameNav,idCon,tagnameCon,orTongjiCon,cNameCon,idLeft,idRight,listNav,listCon,idLeft,idRight);//开始绑定左右键事件。
	}
	//事件监听器
	function addEventHandler(oT,sT,fn){
		if (oT.addEventListener){
			oT.addEventListener(sT,fn,false);
		}
		else{
			oT["on"+sT]=fn;
		}
	}
	//左右键事件监听
	function orLR(idNav,tagnameNav,orTongjiNav,cNameNav,idCon,tagnameCon,orTongjiCon,cNameCon,idLeft,idRight,listNav,listCon){
		(function (idNav,tagnameNav,orTongjiNav,cNameNav,idCon,tagnameCon,orTongjiCon,cNameCon,idLeft,idRight,listNav,listCon){addEventHandler($(idLeft),"click",function(){fnLeft(idNav,tagnameNav,orTongjiNav,cNameNav,idCon,tagnameCon,orTongjiCon,cNameCon,idLeft,idRight,listNav,listCon,idLeft)})})(idNav,tagnameNav,orTongjiNav,cNameNav,idCon,tagnameCon,orTongjiCon,cNameCon,idLeft,idRight,listNav,listCon);
		(function (idNav,tagnameNav,orTongjiNav,cNameNav,idCon,tagnameCon,orTongjiCon,cNameCon,idLeft,idRight,listNav,listCon){addEventHandler($(idRight),"click",function(){fnLeft(idNav,tagnameNav,orTongjiNav,cNameNav,idCon,tagnameCon,orTongjiCon,cNameCon,idLeft,idRight,listNav,listCon,idRight)})})(idNav,tagnameNav,orTongjiNav,cNameNav,idCon,tagnameCon,orTongjiCon,cNameCon,idLeft,idRight,listNav,listCon);
	}
	//左右切换效果
	function fnLeft(idNav,tagnameNav,orTongjiNav,cNameNav,idCon,tagnameCon,orTongjiCon,cNameCon,idLeft,idRight,listNav,listCon,oT){
		var p;
		for (o=0;o<listNav.length ;o++ )
		{
			if ($$(idNav,tagnameNav)[listNav[o]].className==cNameNav)
			{
				if (o==0&&oT==idLeft){p=listNav.length-1;LRTab(p);break;}
				else if (o==listNav.length-1&&oT==idRight){p=0;LRTab(p);break;}
				else {p=oT==idLeft?o-1:o+1;LRTab(p);break;}
			}
		}
		function LRTab(k){
			for (i=0;i<listNav.length ;i++ )
			{
				$$(idNav,tagnameNav)[listNav[i]].className=i==k?cNameNav:"";
				$$(idCon,tagnameCon)[listCon[i]].className=i==k?cNameCon:"";
			}
		}
	}	
	function addTab(idNav,tagnameNav,orTongjiNav,cNameNav,idCon,tagnameCon,orTongjiCon,cNameCon,idLeft,idRight){
		var listNav=fnList(idNav,tagnameNav,orTongjiNav),listCon=fnList(idCon,tagnameCon,orTongjiCon);
		addNavHandler(idNav,tagnameNav,orTongjiNav,cNameNav,idCon,tagnameCon,orTongjiCon,cNameCon,idLeft,idRight,listNav,listCon);
	}
	//var idNav,tagnameNav,orTongjiNav,cNameNav,idCon,tagnameCon,orTongjiCon,cNameCon,idLeft,idRight,listNav,listCon;
	addTab("nav","li",true,"hover","con","li",false,"show","left","right");
	addTab("nav1","li",false,"hover","con1","li",true,"show","left1","right1");
	addTab("nav2","li",false,"hover","con2","li",false,"show","left2","right2");
	}
	
	</script>
</head>
<body>
	<h1>代码示例：</h1>
	<p>addTab("<span class="greenlight">标签栏ID</span>","<span class="greenlight">标签栏子的标签tagname</span>",<span class="greenlight">左右按钮是否在标签栏中并在两侧</span>,"<span class="greenlight">标签栏选中时的className</span>","<span class="greenlight">内容栏ID</span>","<span class="greenlight">内容栏子的标签tagname</span>",<span class="greenlight">左右按钮是否在内容栏中并在两侧</span>,"<span class="greenlight">内容栏选中时的className</span>","<span class="greenlight">向左按钮的ID</span>","<span class="greenlight">向右按钮的ID</span>");</p>
	<h2>左右按钮在标签栏两侧时代码和效果：</h2>
	<p>addTab("nav","li",<span class="redlight">true</span>,"hover","con","li",<span class="redlight">false</span>,"show","left","right");</p>
	<ul ID="nav">
		<li id="left">Left</li>
		<li class="hover">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li id="right">Right</li>
	</ul>
	<ol ID="con">
		<li class="show">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ol>
	<h2>左右按钮在内容栏两侧时代码和效果：</h2>
	<p>addTab("nav1","li",<span class="redlight">false</span>,"hover","con1","li",<span class="redlight">true</span>,"show","left1","right1");</p>
	<ul ID="nav1">
		<li class="hover">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<ol ID="con1">
		<li id="left1">left</li>
		<li class="show">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li id="right1">right</li>
	</ol>
	<h2>左右按钮在tab容器外的代码和效果：</h2>
	<p>addTab("nav2","li",<span class="redlight">false</span>,"hover","con2","li",<span class="redlight">false</span>,"show","left2","right2");</p>
	<ul ID="nav2">
		<li class="hover">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<ol ID="con2">
		<li class="show">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ol>
	<div id="left2">left</div>
	<div id="right2">right</div>
</body>
</html>